import React, { Fragment } from 'react';
import { Row, Col, Card, Content } from 'react-fule-ui';
export default function FuleGrid() {
  return (
    <Fragment>
      <Content>
        <Content.Header>栅格，24分法</Content.Header>
        <Content.Body>
          <Card>
            <Card.Header>栅格</Card.Header>
            <Card.Body>
              <Row gutter={[20, 20]}>
                <Col colSpan={24}>
                  <div style={{ backgroundColor: '#ccc', fontSize: 12 }}>
                    24
                  </div>
                </Col>
                <Col colSpan={12}>
                  <div style={{ backgroundColor: '#ccc', fontSize: 12 }}>
                    12
                  </div>
                </Col>
                <Col colSpan={12}>
                  <div style={{ backgroundColor: '#ccc', fontSize: 12 }}>
                    12
                  </div>
                </Col>
                <Col colSpan={8}>
                  <div style={{ backgroundColor: '#ccc', fontSize: 12 }}>8</div>
                </Col>
                <Col colSpan={8}>
                  <div style={{ backgroundColor: '#ccc', fontSize: 12 }}>8</div>
                </Col>
                <Col colSpan={8}>
                  <div style={{ backgroundColor: '#ccc', fontSize: 12 }}>8</div>
                </Col>
                <Col colSpan={6}>
                  <div style={{ backgroundColor: '#ccc', fontSize: 12 }}>6</div>
                </Col>
                <Col colSpan={6}>
                  <div style={{ backgroundColor: '#ccc', fontSize: 12 }}>6</div>
                </Col>
                <Col colSpan={6}>
                  <div style={{ backgroundColor: '#ccc', fontSize: 12 }}>6</div>
                </Col>
                <Col colSpan={6}>
                  <div style={{ backgroundColor: '#ccc', fontSize: 12 }}>6</div>
                </Col>
                <Col>
                  <div style={{ backgroundColor: '#ccc', fontSize: 12 }}>
                    均等布局
                  </div>
                </Col>
                <Col>
                  <div style={{ backgroundColor: '#ccc', fontSize: 12 }}>
                    均等布局
                  </div>
                </Col>
                <Col>
                  <div style={{ backgroundColor: '#ccc', fontSize: 12 }}>
                    均等布局
                  </div>
                </Col>
                <Col>
                  <div style={{ backgroundColor: '#ccc', fontSize: 12 }}>
                    均等布局
                  </div>
                </Col>
                <Col>
                  <div style={{ backgroundColor: '#ccc', fontSize: 12 }}>
                    均等布局
                  </div>
                </Col>
              </Row>
              <Row gutter={[20, 20]} style={{ paddingTop: '10px' }}>
                <Col colSpan={5}>
                  <div style={{ backgroundColor: '#ccc', fontSize: 12 }}>5</div>
                </Col>
                <Col colSpan={19}>
                  <div style={{ backgroundColor: '#ccc', fontSize: 12 }}>
                    19
                  </div>
                </Col>
                <Col colSpan={4}>
                  <div style={{ backgroundColor: '#ccc', fontSize: 12 }}>4</div>
                </Col>
                <Col colSpan={16}>
                  <div style={{ backgroundColor: '#ccc', fontSize: 12 }}>
                    16
                  </div>
                </Col>
                <Col colSpan={4}>
                  <div style={{ backgroundColor: '#ccc', fontSize: 12 }}>4</div>
                </Col>
              </Row>
            </Card.Body>
          </Card>
          <Card>
            <Card.Header>移动端</Card.Header>
            <Card.Body>
              <Row gutter={[20, 20]} overflow>
                <Col colSpan={8} phone={12}>
                  <div style={{ backgroundColor: '#ccc', fontSize: 12 }}>
                    8, 移动端12
                  </div>
                </Col>
                <Col colSpan={8} phone={12}>
                  <div style={{ backgroundColor: '#ccc', fontSize: 12 }}>
                    8, 移动端12
                  </div>
                </Col>
                <Col colSpan={8} phone={12}>
                  <div style={{ backgroundColor: '#ccc', fontSize: 12 }}>
                    8, 移动端12
                  </div>
                </Col>
              </Row>
            </Card.Body>
          </Card>
          <Card>
            <Card.Header>栅格 - 溢出隐藏</Card.Header>
            <Card.Body>
              <Row gutter={[20, 20]} overflow>
                <Col colSpan={24}>
                  <div style={{ backgroundColor: '#ccc', fontSize: 12 }}>
                    24
                  </div>
                </Col>
                <Col colSpan={12}>
                  <div style={{ backgroundColor: '#ccc', fontSize: 12 }}>
                    12
                  </div>
                </Col>
                <Col colSpan={12}>
                  <div style={{ backgroundColor: '#ccc', fontSize: 12 }}>
                    12
                  </div>
                </Col>
              </Row>
            </Card.Body>
          </Card>
        </Content.Body>
      </Content>
    </Fragment>
  );
}
